<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <detail :title="'总销售额'" :content="'126560'">
          <template slot="footer">
            <span>日销售额 12432</span>
          </template>
          <template slot="charts">
            <span
              >周同比 12%
              <svg
                t="1667715036673"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1332"
                width="16"
                height="16"
              >
                <path
                  d="M554.403 285.884l384.93 393.728c23.166 23.694 22.737 61.682-0.958 84.847a60 60 0 0 1-41.945 17.097H126.57c-33.138 0-60-26.863-60-60a60 60 0 0 1 17.096-41.944l384.931-393.728c23.165-23.695 61.153-24.124 84.847-0.96 0.324 0.317 0.643 0.636 0.959 0.96z"
                  fill="#d81e06"
                  p-id="1333"
                ></path>
              </svg>
              日同比 11%
              <svg
                t="1667715097206"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1568"
                width="16"
                height="16"
              >
                <path
                  d="M554.403 737.672l384.93-393.728c23.166-23.694 22.737-61.682-0.958-84.847A60 60 0 0 0 896.43 242H126.57c-33.138 0-60 26.863-60 60a60 60 0 0 0 17.096 41.944l384.931 393.728c23.165 23.695 61.153 24.124 84.847 0.96 0.324-0.317 0.643-0.636 0.959-0.96z"
                  fill="#1afa29"
                  p-id="1569"
                ></path>
              </svg>
            </span>
          </template>
        </detail>
      </el-col>
      <el-col :span="6">
        <detail :title="'访问量'" :content="'88460'">
          <template slot="footer">
            <span>日访问量 1732</span>
          </template>
          <template slot="charts">
            <LineChart></LineChart>
          </template> </detail
      ></el-col>
      <el-col :span="6">
        <detail :title="'支付笔数'" :content="'88345'">
          <template slot="footer">
            <span>转化率 65%</span>
          </template>
          <template slot="charts">
            <BarChart></BarChart>
          </template> </detail
      ></el-col>
      <el-col :span="6">
        <detail :title="'运营活动效果'" :content="'78%'">
          <template slot="footer">
            <span
              >周同比 12%
              <svg
                t="1667715036673"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1332"
                width="16"
                height="16"
              >
                <path
                  d="M554.403 285.884l384.93 393.728c23.166 23.694 22.737 61.682-0.958 84.847a60 60 0 0 1-41.945 17.097H126.57c-33.138 0-60-26.863-60-60a60 60 0 0 1 17.096-41.944l384.931-393.728c23.165-23.695 61.153-24.124 84.847-0.96 0.324 0.317 0.643 0.636 0.959 0.96z"
                  fill="#d81e06"
                  p-id="1333"
                ></path>
              </svg>
              日同比 11%
              <svg
                t="1667715097206"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1568"
                width="16"
                height="16"
              >
                <path
                  d="M554.403 737.672l384.93-393.728c23.166-23.694 22.737-61.682-0.958-84.847A60 60 0 0 0 896.43 242H126.57c-33.138 0-60 26.863-60 60a60 60 0 0 0 17.096 41.944l384.931 393.728c23.165 23.695 61.153 24.124 84.847 0.96 0.324-0.317 0.643-0.636 0.959-0.96z"
                  fill="#1afa29"
                  p-id="1569"
                ></path>
              </svg>
            </span>
          </template>
          <template slot="charts">
            <ProgressChart></ProgressChart>
          </template> </detail
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import LineChart from './LineChart'
import BarChart from './BarChart'
import ProgressChart from './ProgressChart'
import Detail from './Detail/index.vue'
export default {
  components: {
    Detail,
    LineChart,
    BarChart,
    ProgressChart
  }
}
</script>

<style></style>
